﻿<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

</head>
<body>
<style>

#blogCalendar {
	border:1px solid #ffffff;
	margin:0px;
	width:75%;
}
#CalendarCaption{
	border-bottom:1px dotted #222;
	margin:auto;
	background:#CEE3F6;
}
#CalendarCaption a{
	color:#777;
	text-decoration:none;
	font-size:90%;
}
#CalendarCaption table{
	color:#DF7401;;
	font-family:arial;
}

#CalendarTable {
	background:#E3F6CE;
	padding:0 0 5px 0;
}
#CalendarTable table {
	/*border-collapse:collapse;
	padding:0px;
	border: 10px;*/
	text-align:center;
	font-family:arial;
	font-size:85%;
}
#CalendarTable table td{
	/*display:block;*/
}
#CalendarTable table th{
	color:darkred;
	font-family:arial;
	font-weight:lighter;
	font-size:85%;
	padding:3px;
}
#CalendarTable a:link, #CalendarTable a:visited, #CalendarTable a:active{
	/*font-weight:bold;
	Text-decoration:underline;
	color:#088A4B;*/
}
#CalendarTable table td.Linkday a:hover
{
	Text-decoration:none;
	display:block;
	background:#81BEF7;
	color:#FFF;
}

#CalendarTable .Today{
	color: #DF7401;
	font-weight:bold;
	/*background: #ddd;
	text-decoration:none;*/
}
.Today a:visited, .Today a:link, .Today a:active, .Today a:hover {
	text-decoration:none;
	color: #ddd;
}
#CalendarTable .Lastday {
	color:#999;
}
#CalendarFooter{
	font-family:arial;
	background:#CEE3F6;
	color:#DF7401;
	padding:2px 0 3px 18px;
	border-top:1px dotted #222;
	font-size:80%;
}
#CalendarFooter .Today{

}

#monthTable
{
	text-align:left;
	font-family:arial;
	font-size:85%;
	background:#eee;
	padding:5px;
}
.yearInput{
	background:#eee;
	color:blue;
	padding:2px;
}
#CalLoading{
	margin:0 0 0 2em;
}

</style>


<center>
<div id="blogName" style="color:blue;margin:20px 0 20px 0">

</div>
<div id="Caldemo" style="width:300px;">
<div id="blogCalendar"></div>
</div>
<div style="margin:30px 0 0 0;">
<form name="settings" id="info" action="" onsubmit="javascript:return false;" style="display:inline">
Please enter your blogger URL then press enter<br/>
Timezone must be the one <b>without</b> daylight saving!<br/>
Please correct it if the auto detection does not work well due to daylight saving!<br/>
If your timezone may vary due to daylight saving, please check "Auto Timezone Checking".<br/><br/>
<span>http://<input name="blogNameInput" type="text" style="width:10em" id="blogNameInput" onkeypress="if(event.keyCode==13||event.which == 13) {fetchBlogInfo(); return false;}" /></span>
<select name="selected_timezone" style="height:22px;vertical-align:top;width:100px;" title="Please select your time zone(without daylight saving!)">
	<option value="-720">GMT-12:00 </option>
	<option value="-660">GMT-11:00 </option>
	<option value="-600">GMT-10:00 </option>
	<option value="-540">GMT-09:00 </option>
	<option value="-480">GMT-08:00 </option>
	<option value="-420">GMT-07:00 </option>
	<option value="-360">GMT-06:00 </option>
	<option value="-300">GMT-05:00 </option>
	<option value="-240">GMT-04:00 </option>
	<option value="-210">GMT-03:30 </option>
	<option value="-180">GMT-03:00 </option>
	<option value="-120">GMT-02:00 </option>
	<option value="-60">GMT-01:00 </option>
	<option value="0">GMT+00:00</option>
	<option value="60">GMT+01:00 </option>
	<option value="120">GMT+02:00 </option>
	<option value="180">GMT+03:00 </option>
	<option value="210">GMT+03:30 </option>
	<option value="240">GMT+04:00 </option>
	<option value="270">GMT+04:30 </option>
	<option value="300">GMT+05:00 </option>
	<option value="330">GMT+05:30 </option>
	<option value="345">GMT+05:45 </option>
	<option value="360">GMT+06:00 </option>
	<option value="390">GMT+06:30 </option>
	<option value="420">GMT+07:00 </option>
	<option value="480">GMT+08:00 </option>
	<option value="540">GMT+09:00 </option>
	<option value="570">GMT+09:30 </option>
	<option value="600">GMT+10:00 </option>
	<option value="660">GMT+11:00 </option>
	<option value="720">GMT+12:00 </option>
	<option value="780">GMT+13:00 </option>
</select>
<span title="Datelight Saving? Check this box to initiate auto timezon checking. "><input id="checkTimeZone" style="vertical-align:middle;" type="checkbox" checked />Auto Timezone Checking?</span>
<br/><br/>
<button onclick="fetchBlogInfo();">Show Calendar</button>
</form>
	<div id="addToBlog" style="display:inline">
		<form align="center" id="widgetForm" method="POST" action="http://www.blogger.com/add-widget" style="display:inline">
		<input type="hidden" name="widget.title" value=""/>
		<input type="hidden" name="widget.content" value="&lt;a href='http://buzz.blogger.com/'&gt;Read the Latest Blogger News!&lt;/a&gt;"/>
	    <textarea id="mywidget_content" style="display:none;" name="widget.content">
		</textarea>
		<input type="hidden" name="widget.template" value="&lt;data:content/&gt;" />
		<input type="hidden" name="infoUrl" value="http://lvchen.blogspot.com/2007/08/for-blogger-15.html"/>
		<input type="hidden" name="logoUrl" value="http://www.blogger.com/img/icon_logo32.gif"/>
		<input type="submit" name="go" onclick="installToBlog();" value="Install to Blog"/>
		</form>
	</div>
</div>

</center>
<script type="text/javascript" src="calendar_pack.js"></script>
<script type="text/javascript">
//var gotit = false;

function installToBlog(){
	var blogName = $('#info input').val();
	var text = '\<div id="blogCalendar"\>\<\/div\>\n'
		text += '\<script type="text/javascript" src="http:\/\/lvchen-recentcomments.googlecode.com\/svn\/trunk\/Calendar\/1.0\/calendar_pack.js"\>\<\/script\>\n';
		text += '\<script type="text/javascript"\>\n';
		text += 'Calendar.base="'+blogName+'";\n';
		text += 'Calendar.timeZone="' + $('select option').eq($('select').attr('selectedIndex')).text().substr(3,6) +'";\n';
		if (Calendar.daylightSaving = $('#checkTimeZone').attr('checked'))
		text += 'Calendar.timeZoneCheck = true;\n';
		text += 'Calendar.drawTable();\n';
		text +=	'\<\/script\>\n';
		text += '\<style\>\<\/style\>';
	$('#addToBlog #mywidget_content').val(text);
}

function fetchBlogInfo()	{
	var blogName = $('#blogNameInput').val();
	if (blogName == '')
		blogName = 'lvchen.blogspot.com';
	var scriptID = document.getElementById('jsonPosts'); // remove existing json call
	if (scriptID != undefined)
		document.documentElement.firstChild.removeChild(scriptID);
	var y_script = document.createElement('script');
	var callbacksrc = 'http://' + blogName + '/feeds/posts/summary?alt=json-in-script&callback=readBlogInfo&&max-results=1';
	y_script.setAttribute('src',callbacksrc);
	y_script.setAttribute('id', 'jsonPosts');
	y_script.setAttribute('type', 'text/javascript');
	document.documentElement.firstChild.appendChild(y_script);
}

function readBlogInfo(json)	{
	var blogName = json.feed.title.$t;
	$('#blogName').html('Calendar for ' + blogName);
	var blogTimeZone = json.feed.updated.$t.substr(23,6);
	for (var i = 0; i < 33 ; i++) {
		if ($('select option').eq(i).text().substr(3,6) == blogTimeZone)
			break;
	}
	var blogURL = json.feed.link[0].href;
		blogURL = blogURL.substr(7,blogURL.length-8);
	Calendar.base = blogURL;
	if (blogTimeZone == 'Z' && i == 33)	{
		Calendar.timeZone= 'Z';
		$('select option').eq(13).attr('selected',true);
	}
	else	{
		Calendar.timeZone= blogTimeZone;
		$('select option').eq(i).attr('selected',true);
	}
	Calendar.timeZoneCheck = $('#checkTimeZone').attr('checked');
	$(blogCalendar).html('');
	Calendar.drawTable();
}



//var getTime = new Date();
//var timeZone = getTime.getTimezoneOffset()*(-1);

//for (var i = 0; i < 33 ; i++) {
//	if ($('select option').eq(i).val() == timeZone.toString())
	//	break;
//}
//$('select option').eq(i).attr('selected',true);

//
//
//Calendar.week_label = ["&nbsp;日&nbsp;","&nbsp;一&nbsp;","&nbsp;二&nbsp;","&nbsp;三&nbsp;","&nbsp;四&nbsp;","&nbsp;五&nbsp;","&nbsp;六&nbsp;"];
//Calendar.month_label_real = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
Calendar.timeZone= '-05:00';
Calendar.timeZoneCheck = true;
Calendar.drawTable();
</script>



</body>
<html>